<template>
    <div id="adverlist">
      <div>
        <el-button @click="addTit('新增')">新增</el-button>
        <el-button @click="addTit('屏蔽')">屏蔽</el-button>
        <el-button @click="addTit('解除屏蔽')">解除屏蔽</el-button>
        <el-button @click="searchshow = !searchshow">搜索&nbsp;<i class="iconfont icon-zhankai" :class="{active: searchshow === true}" style="font-size: 12px"></i></el-button>
      </div>
      <el-collapse-transition>
        <div v-show="searchshow">
          <div class="main-box">
            <span>类别名</span>
            <el-input
              placeholder="请输入广告类别名"
              size="mini"
              prefix-icon="el-icon-search"
              v-model="searchmsg.cate_name">
            </el-input>
          </div>
          <div class="main-box">
            <span>类别ID</span>
            <el-input
              placeholder="请输入广告类别ID"
              size="mini"
              type="number"
              prefix-icon="el-icon-search"
              v-model="searchmsg.id">
            </el-input>
          </div>
          <div class="main-box">
            <span>状态</span>
            <el-radio-group v-model="searchmsg.enabled">
              <el-radio label="">全部</el-radio>
              <el-radio label="1">可用</el-radio>
              <el-radio label="0">不可用</el-radio>
            </el-radio-group>
            <span style="margin-left: 20px"><el-button size="mini" @click="searchSure">确定</el-button></span>
          </div>
        </div>
      </el-collapse-transition>
      <!--列表-->
      <msg-list :tableData="tableData" :title="title" :btntype="btntype" :pagesall="parseInt(pagesall)" :pages="parseInt(page)" @getselect="getselect" @changepage="changepage1" @getid="getid1"></msg-list>
      <!--新增/修改-->
      <div class="layer" v-show="seecontent">
        <div class="mask" @click="seecontent = false"></div>
        <div class="content">
          <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94"></i></span>
          <p class="title">{{addtitle}}分类</p>
          <div class="inputcl">
            <span class="layer-list-title">类别名:</span>
            <span><el-input v-model="addadver.cate_name" placeholder="请输入广告类别名" size="mini"></el-input></span>
          </div>
          <div class="clear"></div>
          <div class="inputcl">
            <span class="layer-list-title">类别排序:</span>
            <span><el-input v-model="addadver.cate_order" placeholder="请输入排序号,越大越靠前" size="mini" type="number"></el-input></span>
          </div>
          <div class="clear"></div>
          <div class="inputcl">
            <span class="layer-list-title">广告标识:</span>
            <span><el-input v-model="addadver.cate_tag" placeholder="请输入广告标识" size="mini"></el-input></span>
          </div>
          <div class="clear"></div>
          <div class="inputcl">
            <span class="layer-list-title">状态:</span>
            <span>
            <el-radio-group v-model="addadver.enabled">
              <el-radio label="1">可用</el-radio>
              <el-radio label="0">不可用</el-radio>
            </el-radio-group>
          </span>
          </div>
          <div class="clear"></div>
          <div class="main-box" style="text-align: center">
            <span style="margin-left: 50px;"><el-button @click="addTags">确定</el-button></span>
            <span style="margin-left: 50px;"><el-button @click="seecontent = false">取消</el-button></span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import msgbox from '../../common/msgbox.js'
import MsgList from '../public/msgList'
export default {
  name: 'index',
  components: { MsgList },
  data () {
    return {
      title: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'cate_name',
          label: '类别名'
        },
        {
          prop: 'cate_order',
          label: '排序'
        },
        {
          prop: 'cate_tag',
          label: '标识'
        },
        {
          prop: 'enabled',
          label: '是否可用'
        }
      ],
      btntype: ['管理', '修改', '删除'],
      getids: [],
      searchshow: false,
      searchmsg: {
        id: '',
        cate_name: '',
        enabled: ''
      },
      seecontent: false,
      addtitle: '新增',
      addadver: {
        cate_name: '',
        cate_order: 0,
        cate_tag: '',
        enabled: '1'
      },
      getid: 0,
      page: 1,
      tableData: [],
      pagesall: 1
    }
  },
  mounted () {
    this.search()
  },
  watch: {
    seecontent () {
      if (this.seecontent === false) {
        console.log(this.seecontent)
        this.addadver = {
          cate_name: '',
          cate_order: 0,
          cate_tag: '',
          enabled: '1'
        }
      }
    }
  },
  methods: {
    searchSure () {
      this.page = 1
      this.search()
    },
    getselect (vals) { // 获取多选id
      console.log(vals)
      this.getids = []
      for (let i in vals) {
        this.getids.push(vals[i].id)
      }
    },
    changepage1 (page) { // 更改page
      this.page = page
      this.search()
    },
    getid1 (val) { // 获取列表button信息
      console.log(val)
      if (val.btn === '管理') {
        console.log('管理')
        this.$router.push('/advertisement/total/' + val.val.id)
      }
      if (val.btn === '删除') {
        console.log('删除')
        this.getid = val.val.id
        this.delone()
      }
      if (val.btn === '修改') {
        console.log('修改')
        this.addadver = {
          cate_name: val.val.cate_name,
          cate_order: val.val.cate_order,
          cate_tag: val.val.cate_tag,
          enabled: val.val.enabled === '可用' ? '1' : '0'
        }
        this.getid = val.val.id
        this.seecontent = true
        this.addtitle = '修改'
      }
    },
    search () { // 搜索获取数据
      console.log(this.searchmsg)
      console.log(this.page)
      let that = this
      this.$g.ajax({
        path: 'adcates/index',
        method: 'post',
        data: {
          page: this.page,
          id: parseInt(this.searchmsg.id),
          cate_name: this.searchmsg.cate_name,
          enabled: this.searchmsg.enabled === '' ? this.searchmsg.enabled : parseInt(this.searchmsg.enabled)
        },
        cbSuccess: function (data) {
          that.tableData = data.memo.list
          that.page = parseInt(data.memo.page)
          that.pagesall = parseInt(data.memo.pageNext) + parseInt(data.memo.page)
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    addTit (type) {
      let that = this
      if (type === '新增') {
        this.seecontent = true
        this.addtitle = type
      } else if (type === '屏蔽' || type === '解除屏蔽') {
        let status = type === '屏蔽' ? 0 : 1
        if (that.getids.length <= 0) {
          that.$message.error(`请选择要${type}的广告分类`)
        } else {
          this.$g.ajax({
            path: 'adcates/enabled',
            method: 'post',
            data: {
              action: status,
              ids: that.getids
            },
            cbSuccess: function (data) {
              for (let i in that.tableData) {
                for (let n in that.getids) {
                  if (that.tableData[i].id === that.getids[n]) {
                    that.tableData[i].enabled = status
                  }
                }
              }
              that.$message.success(`${type}成功`)
            },
            cbError: function (data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
      }
    },
    addTags () {
      let that = this
      // console.log(this.addadver)
      // console.log(this.addtitle)
      if (this.addadver.cate_name === '') {
        this.$message.error('类别名不能为空')
      } else if (this.addadver.cate_name.length > 30) {
        this.$message.error('类别名不能超过30位字符')
      } else if (this.addadver.cate_order === '') {
        this.$message.error('类别排序不能为空')
      } else if (parseInt(this.addadver.cate_order) > 10000) {
        this.$message.error('类别排序应小于10000')
      } else if (this.addadver.cate_tag === '') {
        this.$message.error('广告标识不能为空')
      } else if (this.addadver.cate_tag.length > 15) {
        this.$message.error('广告标识不能超过15位字符')
      } else {
        if (this.addtitle === '新增') {
          that.$g.ajax({
            path: 'adcates/add',
            method: 'post',
            data: {
              cate_name: that.addadver.cate_name,
              cate_order: parseInt(that.addadver.cate_order),
              cate_tag: that.addadver.cate_tag,
              enabled: parseInt(that.addadver.enabled)
            },
            cbSuccess: function (data) {
              that.seecontent = false
              that.addadver = {
                cate_name: '',
                cate_order: 0,
                cate_tag: '',
                enabled: '1'
              }
              that.$message.success(`${that.addtitle}成功`)
              that.search()
            },
            cbError: function (data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (this.addtitle === '修改') {
          that.$g.ajax({
            path: 'adcates/update',
            method: 'post',
            data: {
              id: that.getid,
              cate_name: that.addadver.cate_name,
              cate_order: parseInt(that.addadver.cate_order),
              cate_tag: that.addadver.cate_tag,
              enabled: parseInt(that.addadver.enabled)
            },
            cbSuccess: function (data) {
              that.seecontent = false
              that.$message.success(`${that.addtitle}成功`)
              // that.search()
              for (let i in that.tableData) {
                if (parseInt(that.tableData[i].id) === parseInt(that.getid)) {
                  that.tableData[i].cate_name = that.addadver.cate_name
                  that.tableData[i].cate_order = parseInt(that.addadver.cate_order)
                  that.tableData[i].cate_tag = that.addadver.cate_tag
                  that.tableData[i].enabled = parseInt(that.addadver.enabled)
                }
              }
              that.$nextTick(() => {
                that.addadver = {
                  cate_name: '',
                  cate_order: '',
                  cate_tag: '',
                  enabled: '1'
                }
                that.getid = 0
              })
            },
            cbError: function (data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
      }
    },
    delone () { // 删除广告分类
      let that = this
      this.$confirm('确定删除该分类吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.$g.ajax({
          path: 'adcates/delete',
          method: 'post',
          data: {
            id: that.getid
          },
          cbSuccess: function (data) {
            for (let i in that.tableData) {
              if (parseInt(that.tableData[i].id) === parseInt(that.getid)) {
                that.tableData.splice(i, 1)
              }
            }
            that.$message.success('删除成功')
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .active{
    display: inline-block;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
  }
  #adverlist {
    .main-box{
      margin-top: 20px;
      span{
        margin-right: 30px;
        font-size: 14px;
        font-weight: 700;
        color: #606266;
      }
      .el-input {
        width: 240px;
      }
    }
    .main-box {
      .el-radio__inner {
        background: red;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color: #00a4a0!important;
      }
    }
    .layer {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 999;
      overflow: hidden;
      .mask {
        background: rgba(153, 153, 153, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
      }
      .imgcontent {
        text-align: center;
        img {
          position: relative;
          max-width: 80%;
          max-height: 80%;
          background: #fff;
          margin: 5% auto;
          z-index: 3;
        }
      }
      .content {
        position: relative;
        width: 60%;
        max-height: 80%;
        background: #fff;
        margin: 5% auto;
        z-index: 2;
        padding: 30px;
        .close {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
        }
        .inputcl {
          margin-top: 20px;
          .layer-list-title {
            display: inline-block;
            width: 80px;
            margin-left: 15px;
            margin-right: 10px;
            float: left;
            vertical-align: middle;
            line-height: 28px;
          }
          .img-list {
            vertical-align: top;
            float: left;
            line-height: 18px;
          }
          .imgupload {
            display: block;
            margin-left: 105px;
          }
          .el-input {
            max-width: 200px;
          }
          img {
            width: 320px;
            height: 240px;
          }
        }
        .title {
          text-align: center;
          font-size: 18px;
          font-weight: bold;
        }
        .doit .one .el-input {
          width: 200px;
          margin-left: 20px;
        }
        .doit .one {
          margin-top: 20px;
          font-size: 14px;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
          position: relative;
          left: -4px;
        }
        .buttons {
          margin-top: 20px;
          text-align: center;
          button {
            margin: 0 20px;
          }
        }
      }
    }
  }
</style>
<style>
  .el-button:focus, .el-button:hover{
    color: #00a4a0;
  }
  .el-button:active{
    border-color: #00a0a0;
  }
  .el-button{
    padding: 8px 14px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #00a4a0;
    border-color: #00a4a0;
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
  #videolist .el-textarea__inner {
    resize: none;
  }
</style>
